<template>
	<view class="uni-pages">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template slot="top">
				<u-navbar :borderBottom="false" :height="50" :isFixed="false" :is-back="true" back-icon-color="#4f4f4f"
					title-color="#333">
					<view class="flex justify-between align-center text-333 font-18 width-100 padding-lr-sm text-4f">
						<view class="font-weight-blod flex-1 flex justify-center align-center height-100 text-333">
							订单状态</view>
					</view>
				</u-navbar>
				<view>
					<u-tabs active-color="#F88F33" :offset="[0,50]" :bold="false" bar-width="40" bar-height="4"
					name="cate_name" count="cate_count" :list="list1" :is-scroll="false" :current="current"
					@change="changeTab"></u-tabs>
					</view>
				
				<view class="flex justify-between padding bg-white" style="color: #4F4F4F;">
					<view @click="show=!show" class="flex align-center justify-center datePicker">
						{{ input ? input : '请选择开始日期' }}</view>
					<view class="flex align-center justify-center">至</view>
					<view @click="show=!show" class="flex align-center justify-center datePicker">
						{{ input ? input : '请选择结束日期' }}</view>
				</view>
				<view class="flex align-center padding-lr padding-bottom bg-white" style="color: #4F4F4F;">
					即时退补单：
					<view class="padding-lr-sm flex-1 margin-right-sm" style="background-color: #F2F3F5;border-radius: 20rpx;">
						<u-dropdown active-color="#f37b1d" menu-icon="arrow-down-fill" menu-icon-size="22" height="60rpx">
							<u-dropdown-item  v-model="selectParam.jishiFlag" :title="jishiLabel" :options="jishiOptions"  @change="jishiChange"></u-dropdown-item>
						</u-dropdown>
					</view>
					是否冲红：
					<view class="padding-lr-sm flex-1" style="background-color: #F2F3F5;border-radius: 20rpx;">
						<u-dropdown active-color="#f37b1d" menu-icon="arrow-down-fill" menu-icon-size="22" height="60rpx">
							<u-dropdown-item  v-model="selectParam.jishiFlag" :title="jishiLabel" :options="jishiOptions"  @change="jishiChange"></u-dropdown-item>
						</u-dropdown>
					</view>
				</view>
				<view class="flex align-center padding-lr padding-bottom bg-white" style="color: #4F4F4F;">
					
					<view class="padding-lr-sm margin-right-sm" style="background-color: #F2F3F5;border-radius: 20rpx;">
						<u-dropdown active-color="#f37b1d" menu-icon="arrow-down-fill" menu-icon-size="22" height="60rpx">
							<u-dropdown-item  v-model="selectParam.jishiFlag" :title="jishiLabel" :options="jishiOptions"  @change="jishiChange"></u-dropdown-item>
						</u-dropdown>
					</view>
					<u-search search-icon-color="#BDBDBD" bg-color="#F2F3F5" placeholder-color="#BDBDBD" :action-style="{color:'#828282'}"	 placeholder="请输入客户名称" v-model="keyword"  :actionStyle="{color:'#F88F33'}"></u-search>
					
				</view>
			</template>
			
		</z-paging>
		<u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>


	</view>
</template>

<script>
	import uPicker from '../../components/uview-ui/components/u-picker/u-picker'
	export default {
		components: {
			uPicker
		},
		data() {
			return {
				selectParam:{
					startDate:"",
					endDate:"",
					jishiFlag:-1
				},
				input: '',
				show: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				jishiLabel:"全部",
				jishiOptions: [
					{
						label: '全部',
						value: 0,

					}, {
						label: '是',
						value: 1,
					},
					{
						label: '否',
						value: 2,

					},
				],
				dataList: [],
				list1: [{
						cate_name: '已取消',
						cate_count: 1
					}, {
						cate_name: '审核中',
						cate_count: 10
					}, {
						cate_name: '已审核',
						cate_count: 100
					},

				],

				list2: [{
						cate_name: '待出库',
						cate_count: 100
					},
					{
						cate_name: '已出库',
					},
					{
						cate_name: '全部订单',
					}, {
						cate_name: '已审核',

					},

				],

				current: 0

			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			changeTab(e){
				console.log(e)
				this.current = e
			},
			jishiChange(e){
					console.log(e)
						this.jishiLabel = this.jishiOptions[e].label
						this.selectParam.jishiFlag = e
			},
			selectDate(e) {
				console.log(e)
			},
			confirm(e) {
				// console.log(e);
				this.input = '';
				if (this.params.year) this.input += e.year;
				if (this.params.month) this.input += '-' + e.month;
				if (this.params.day) this.input += '-' + e.day;
				if (this.params.hour) this.input += ' ' + e.hour;
				if (this.params.minute) this.input += ':' + e.minute;
				if (this.params.second) this.input += ':' + e.second;
			},
			
			onDropdownOpen(i) {
				if (i == 1) {
					this.dropDownClose(2)
				} else {
					this.dropDownClose(1)
				}
			},
			dropDownClose(type = 0) {
				switch (type) {
					case 1:
						this.$refs.dropdown1.close();
						break;
					case 2:
						this.$refs.dropdown2.close();
						break;
					default:
						this.$refs.dropdown1.close();
						this.$refs.dropdown2.close();
						break;
				}
			},

			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
			async queryList(pageNo, pageSize) {
				console.log(pageNo, pageSize)
				console.log("判断是否登录", this.isLogin)
				if (pageNo == 1) {
					let res = [{
						id: 1
					}, {
						id: 1
					}, {
						id: 1
					}, {
						id: 1
					}, {
						id: 1
					}]
					this.$refs.paging.complete(res)

				} else {
					this.$refs.paging.complete([])
				}
				// if (!this.isLogin) {
				// 	this.$refs.paging.complete(false);
				// 	return;
				// }
				// try {
				// 	let data = await this.$http.post(this.$api.edu.getOnlineCourseSelectionList, {
				// 		key: this.dataForm.key,
				// 		studyId: this.dataForm.studyId ? this.dataForm.studyId : -1,
				// 	})
				// 	this.$refs.paging.complete(data.list)
				// } catch (e) {
				// 	this.$refs.paging.complete([]);
				// }

			},

		},


	}
</script>

<style scoped lang="scss">
	.uni-pages {
		height: 100vh;
		background-color: #F6F6F6;
	}

	.input {
		border: 1px solid $u-light-color;
		border-radius: 4px;
		margin-bottom: 20px;
		height: 30px;
		font-size: 26rpx;
		flex: 1;
	}

	.input-wrap {
		display: flex;
	}

	.datePicker {
		width: 45%;
		height: 60rpx;
		background-color: #F2F3F5;
		border-radius: 20rpx;
	}
</style>